iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
Modern Web

從零開始進入 JavaScript & TypeScript 的世界系列 第 9

第09天-建構子(Constructor)與存取修飾符(Access modifier)

  • 分享至 

  • xImage
  •  

建構子(Constructor)

關於昨天範例的結果,相信大家應該都知道答案了,昨天介紹的範例中,他的結果就會是 undefined。因為所有的變數在尚未初始化之前,他的內容都會是 undefined

在昨天那個範例中,由於有兩個屬性(Attribute)都沒有初始化,所以導致於在使用的時候出現 undefined 這種現象,那我們可以用什麼去初始化他呢?其實就跟其他的程式語言一樣,我們可以使用建構子(Constructor),讓在建立物件的同時也初始化我們想要初始化屬性。

對於 CSharp 或 Java 來說,建構子看起來就很像是與類別名稱相通的函式(method),不過在 TypeScript 的世界裡並不是這樣,他的建構子讓沒學過 TypeScript 的人看也知道哪一個是建構子,因為他的名字就是 Constructor,很酷吧。

class Rectangle {
    width: number;
    length: number;

    constructor( theWidth: number, theLength: number) {
        this.width = theWidth;
        this.length = theLength;
    }

    calculateArea() {
        // 這裡我們先不計算面積,先把他列印出來看看
        console.log('width:' + this.width + ', length:' + this.length);
    }

    getDiffWith(rectangle: Rectangle) => {
        // ...
    }
}

// 建立物件同時給予 width 及 length 初始化
let rect = new Rectangle(10, 12);

從上面的例子中,我相信應該很明顯吧,constructor( theWidth: number, theLength: number) 就是要很明明白白的讓你知道,我就是建構子(Constructor)。另外,我們在裡面加入了兩個參數 theWidththeLength,這個的目的就是要在建立物件時,順便初始化他們。

不過如果你有學過其物件導向一定會覺得這樣寫似乎怪怪的,不符合封裝或高內聚的原則。所以接下來要介紹的就是存取修飾符(Access Modifiers)。

存取修飾符(Access Modifiers)

關於存取修飾符的部分,TypeScript 也與其他語言一樣有分三種,分別是 public, private 以及 protected。

public

在 TypeScript 中,我覺得有一個比較不一樣的地方就是,他的存取修飾符的 預設值是公開的(在 Java 或 CShapr 甚至 Scala 都不是這樣),所以這點可能要留意一下。

private

以上面那個例子來說,我們在 width 以及 length 前面都沒有加任何的存取修飾符,所以他就是公開的。也就是說我們可以直接用 某物件名稱.width某物件名稱.length 去存取他。那如果我們希望把它封裝在 Rectangle 類別裡,我們就可以為它加上 private 這個存取修飾符,讓外界無法直接存取。

class Rectangle {
    private width: number;
    private length: number;

    //.. 以下省略

protected

與 private 相同的是,protected 這個存取修飾符也是無法直接透過物件來存取的,他會被封裝起來。那不同點呢?不同點就是,protected 的成員是可以被繼承該類別的子類別所存取。舉個例子來說,假設我有一個類別叫做 Animal, 然後有另一個類別 Rabbit 繼承了 Animal 這個類別,因此,Rabbit 這個類別就可存取 Animal 裡面的 protected 成員了。


上一篇
第08天-類別
下一篇
第10天-優雅的建構子存取修飾符
系列文
從零開始進入 JavaScript & TypeScript 的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言